<template>
    <div id="topBar">
        <i id="switch" :class="$store.state.isCollapse?'el-icon-s-unfold':'el-icon-s-fold'" @click="$store.commit('switch')"></i>

            <Breadcrumb style="line-height: 50px;width: 200px;float: left"></Breadcrumb>

        <Avatar id="Avatar"></Avatar>
    </div>

</template>

<script>
import Avatar from "../common/Avatar"
import Breadcrumb from "../content/Breadcrumb"
    export default {
        name: "TopBar",
        components:{
          Avatar,Breadcrumb
        }
    }
</script>

<style scoped>
    #topBar{
        width: 100%;
        height: 50px;
        background-color: #fff;
        /* box-shadow:2px 2px 2px rgb(243,244,245); */
        border-bottom: 1px solid rgb(243, 244, 245);
        box-sizing: border-box;
    }
    #path{
        line-height: 50px;
        float: left;
    }
    #switch{
        cursor: pointer;
        float: left;
        font-size: 26px;
        line-height: 50px;
        /*margin: 10px;*/
        height: 100%;
        width: 50px;
        text-align: center;
    }
    #switch:hover{
        background-color: rgb(249,249,249);
    }
    #Avatar{
      
     position: absolute;
     left: 80%;
      line-height: 50px;
      cursor: pointer;
    }
    .slide-fade-enter-active {
        transition: all .3s ease;
        transition-delay: .3s;
    }
    .slide-fade-leave-active {
        transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to
        /* .slide-fade-leave-active for below version 2.1.8 */ {
        transform: translateX(10px);
        opacity: 0;
    }
</style>